<template>
 <bm-overlay ref="customOverlay" class="friendsample" pane="labelPane" @draw="draw">
    <div class="myover" @touchend="speak(index)">
        <div class="upic">
            <img :src="detail.user.photo">
        </div>
        <p :class="{active:doclick}">{{detail.user.name}}</p>
    </div>
  </bm-overlay>
</template>
<script>
export default {
  props:['position',"detail","index"],
  data(){
      return{
          doclick:false,//判断是否点击
      }
  },
  methods:{
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      console.log()
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 24 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    speak(index){
         this.$emit("revindex",index)
         this.doclick=!this.doclick
    }
  }
}
</script>

<style lang="less" scoped>
@import "~less/base";
    .friendsample{
        position: absolute;
        .myover{
           position: relative;
           .upic{
               position: absolute;
               z-index: 1;
               img{
                    width: .8rem;
                    border-radius: 50%;
                }
           }  
            p{
                position: absolute;
                top: 0.2rem;
                left: .5rem;
                line-height: .42rem;
                padding-left: .4rem;
                padding-right: .1rem;
                background-color: #ffffff;
                box-shadow: .01rem .01rem .02rem @color-m;
            }
            .active{
                color:#f47d43
            }
        }
    }
   
</style>
